<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字体行高属性(font line height attribute)</title>
  <!-- 
  line-height 是CSS属性，用于设置行高，即行与行之间的垂直间距。 line-height 属性的总结： 
 
    1.  line-height: normal; ：默认值，行高由浏览器决定，通常为字体大小的1.2倍。 
    2.  line-height: number; ：设置行高为字体大小的倍数，例如 1.5 表示行高为字体大小的1.5倍。 
    3.  line-height: length; ：设置固定的行高，可以使用像素（px）、em、百分比（%）等长度单位。 
    4.  line-height: inherit; ：继承父元素的行高值。 
 
  通过设置 line-height 属性，可以控制文本行与行之间的间距，从而影响文本在页面中的排版和可读性。
  -->
  <style>
    .line-height {
      background-color: antiquewhite;
      width: 160px;

      line-height: 2; /* 设置行高为字体大小的2倍 */
    }
    /* 应用场景: 一般用于垂直居中 */
    .container-line-height {
      height: 100px;
      background-color: aquamarine;

      line-height: 100px;
    }
  </style>
</head>
<body>

  <div class="line-height">
    line-height 是CSS属性，用于设置行高，即行与行之间的垂直间距。以下是关于 line-height 属性的总结： 
    1.  line-height: normal; ：默认值，行高由浏览器决定，通常为字体大小的1.2倍。 
    2.  line-height: number; ：设置行高为字体大小的倍数，例如 1.5 表示行高为字体大小的1.5倍。 
    3.  line-height: length; ：设置固定的行高，可以使用像素（px）、em、百分比（%）等长度单位。 
    4.  line-height: inherit; ：继承父元素的行高值。 
  </div>

  <div class="container-line-height">
    line-height 是CSS属性，用于设置行高，即行与行之间的垂直间距。
  </div>
  
</body>
</html>